<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        .green{
            background-color: green;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
    <body>
        <div id="app" >
           <button @click="bg='red'">红</button>
           <button @click="bg='blue'">蓝</button>
            <div style="width: 200px;height: 200px" :class="bg">
                {{bg}}
            </div>
        </div>
        <!--导包一定要双标签，不能单标签-->
        <script src="./node_modules/vue/dist/vue.js"></script>

        <script type="text/javascript">

            var vue = new Vue({
                el:"#app",
                data:{
                    name:"刘德华",
                    bg:'green'
                }


            })
        </script>
    </body>
</html>